<template>
  <div style="margin-bottom: 20px">
    <el-button type="primary" plain @click="handleDialog">
      添加采集源
    </el-button>
    <el-button type="danger" style="margin: 15px" @click="handleDelete">
      批量删除
    </el-button>
  </div>

  <!-- 表格数据 -->
  <el-table
    v-loading="tableLoading"
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
    stripe
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="collectName" label="名称"> </el-table-column>
    <el-table-column prop="collectUrl" label="采集地址"> </el-table-column>
    <el-table-column prop="updatedAt" label="更新时间" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" @click="handleCollectPage(row)">采集</el-button>
        <el-button type="text" @click="handleDelete([row.id], true)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加采集源 -->
  <el-dialog v-model="dialogVisible" title="添加采集源" width="60%">
    <el-form
      ref="diaForm"
      :model="diaFormData"
      :rules="diaFormRules"
      label-width="110px"
      style="width: 460px"
    >
      <el-form-item prop="collectName" label="名称：">
        <el-input v-model="diaFormData.collectName" />
      </el-form-item>
      <el-form-item prop="collectUrl" label="采集地址：">
        <el-input v-model="diaFormData.collectUrl" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="diaBtnLoding" @click="collectCreat">
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑采集源 -->
  <el-dialog v-model="editDialogVisible" title="编辑采集源" width="60%">
    <el-form
      ref="editDiaForm"
      :model="editDiaFormData"
      :rules="editFiaFormRules"
      label-width="110px"
      style="width: 460px"
    >
      <el-form-item prop="collectName" label="名称：">
        <el-input v-model="editDiaFormData.collectName" />
      </el-form-item>
      <el-form-item prop="collectUrl" label="采集地址：">
        <el-input v-model="editDiaFormData.collectUrl" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="editBtnLoaing"
          @click="collectUpdate"
        >
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
import { collect, collectCreat, collectDelete, collectUpdate } from '@i/vod'

export default {
  setup() {
    const { ctx } = getCurrentInstance()
    const confirm = () =>
      ctx.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

    // 列表
    const table = reactive({
      tableLoading: false,
      tableData: [],
      selectedRowKeys: [],
      async collectList() {
        table.tableData = await collect()
      },
      async handleDelete(id, single) {
        id = single ? id : table.selectedRowKeys
        if (!id.length) {
          ctx.$message({
            message: '请选择数据',
            type: 'warning'
          })
          return
        }
        try {
          await confirm()
          table.loading = true
          await collectDelete({
            ids: id
          })
          ctx.$message({
            message: '删除成功',
            type: 'success'
          })
          table.collectList()
        } catch (error) {
          table.loading = false
        }
      },
      handleCollectPage(row) {
        ctx.$router.push({
          path: '/vod/page',
          query: {
            id: row.id,
            collectUrl: encodeURI(row.collectUrl)
          }
        })
      },
      handleSelectionChange(val) {
        table.selectedRowKeys = val.map(item => item.id)
      }
    })

    // 添加采集源
    const addTypeDialog = reactive({
      dialogVisible: false,
      diaBtnLoding: false,
      diaFormRules: {
        collectName: { required: true, message: '请输入名称' },
        collectUrl: { required: true, message: '请输入采集地址' }
      },
      diaFormData: {
        collectName: '',
        collectUrl: ''
      },
      async collectCreat() {
        await ctx.$refs.diaForm.validate()
        try {
          addTypeDialog.diaBtnLoding = true
          await collectCreat(addTypeDialog.diaFormData)
          table.collectList()
          addTypeDialog.diaBtnLoding = false
          addTypeDialog.dialogVisible = false
          ctx.$message({
            message: '新增成功',
            type: 'success'
          })
        } catch (error) {
          addTypeDialog.diaBtnLoding = false
          throw error
        }
      },
      handleDialog() {
        addTypeDialog.dialogVisible = true
        // 移除表单校验
        ctx.$nextTick(() => {
          ctx.$refs.diaForm.clearValidate()
          ctx.$refs.diaForm.resetFields()
        })
      }
    })

    // 编辑采集源
    const editTypeDialog = reactive({
      editDialogVisible: false,
      editBtnLoaing: false,
      editDiaFormData: {},
      editFiaFormRules: {
        collectName: { required: true, message: '请输入名称' },
        collectUrl: { required: true, message: '请输入采集地址' }
      },
      handleEdit(val) {
        editTypeDialog.editDiaFormData = { ...val }
        editTypeDialog.editDialogVisible = true
      },
      async collectUpdate() {
        await ctx.$refs.editDiaForm.validate()
        try {
          editTypeDialog.loading = true
          const params = {
            id: editTypeDialog.editDiaFormData.id,
            collectName: editTypeDialog.editDiaFormData.collectName,
            collectUrl: editTypeDialog.editDiaFormData.collectUrl
          }
          await collectUpdate(params)
          table.collectList()
          ctx.$message({
            message: '编辑成功',
            type: 'success'
          })
          editTypeDialog.editDialogVisible = false
          editTypeDialog.loading = false
        } catch (error) {
          editTypeDialog.loading = false
          ctx.$message({
            message: '编辑失败',
            type: 'error'
          })
          throw error
        }
      }
    })

    onMounted(() => table.collectList())

    return {
      ...toRefs(table),
      ...toRefs(addTypeDialog),
      ...toRefs(editTypeDialog)
    }
  }
}
</script>

<style lang="scss" scoped></style>
